<template>
  <div>
    <div>
    <div class="background"></div> 
    <div class="content"></div>  
    <div class="background">    
    <img :src="imgSrc" width="100%" height="100%" alt="" /></div>
    </div>
    <br />
    <div>
      <el-form  :inline="true" :model="A">
            <el-form-item prop="" label="医生姓名">
                <el-input v-model="A.doctorName" placeholder="医生姓名"></el-input>
            </el-form-item>
            <el-form-item label="">科室：
                   <el-select v-model="A.divisionName" placeholder="请选择" style="width: 200px" >
                    <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.divisionName"
                    :value="item.divisionName">
                    </el-option>
                </el-select>
              </el-form-item>
            <el-form-item>
                <el-button type="success" icon="el-icon-search" @click="mhcAdd()"></el-button>
            </el-form-item>
            
            <el-button type="primary" style="margin-left: 300px" @click="addDoctorMtk()">添加医生信息</el-button>
        </el-form>
    </div>

    <div>
      <el-table border :data="Data.slice((currentPage-1)*pagesize,currentPage*pagesize)">
        <el-table-column prop="doctorName" label="医生姓名"></el-table-column>
        <el-table-column prop="img" label="头像" align="center">
          <template slot-scope="scope">            
            <img :src="scope.row.img"  min-width="70" height="70" />
          </template>  
        </el-table-column>
        <el-table-column prop="campusName" label="院区"></el-table-column>
        <el-table-column prop="jobTitle" label="职称"></el-table-column>
        <el-table-column prop="divisionName" label="科室"></el-table-column>
        <el-table-column prop="labels" label="标签"></el-table-column>
        <el-table-column prop="introduction" label="医生简介"></el-table-column>
        <el-table-column label="操作" v-slot="a">
          <el-button type="primary" size="mini" @click="xiugai(a.row)">修改</el-button>
          <el-button type="primary" size="mini" @click="shanchu(a.row)">删除</el-button>
        </el-table-column>
      </el-table>
       <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[3, 5, 7]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="Data.length">
        </el-pagination>
    </div>

    <div>
      <el-dialog title="是否删除" :visible.sync="delmtk" :model="del">
        <el-button type="primary" @click="delDoctor()">确定</el-button>
        <el-button type="primary" @click="delmtk=false" >取消</el-button>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgSrc:require('../tupian/akali.jpg'),
      A: {
        doctorName:'',
        divisionName:''
      },
      Data: [],
      delmtk: false,
      upd: {},
      del: {},
      options:{},
       headertitle: "",
            centerDialogVisible:false,
            pagesize:3,
            currentPage:1,
    };
  },
  created() {
    this.findDoctorAll();
    this.option();
  },
  methods: {
    option() {
      this.$axios.get("/user/user/doctor/ren/findDoctorAll").then((res) => {
        // console.log("!!!!!!!!!!!!!!!!"+JSON.stringify(res.data.data.list));
        this.options = res.data.data.list;
      });
    },
    findDoctorAll() {
      this.$axios.get("/user/user/doctor/ren/findDoctorAll").then((res) => {
        console.log(res.data.data.list);
        this.Data = res.data.data.list;
      });
    },
    addDoctorMtk() {
      this.$router.push({ path: "/AddDoctor" });
    },
    xiugai(row) {
      this.$router.push({path: "/UpdDoctor",query: {row: row}});
      this.upd = { ...row };
    },
   shanchu(row){
     this.delmtk=true;
     this.del = { ...row };
   },
   delDoctor(){
     this.$axios.post("/user/user/doctor/ren/delDoctor",this.del).then(res=>{
       this.delmtk=false;
       this.findDoctorAll();
     })
   },
   mhcAdd(){
     this.$axios.get("/user/user/doctor/ren/mhcAdd",{  	params:{
				doctorName:this.A.doctorName,
				divisionName:this.A.divisionName,
       }}
   
			).then(res=>{
       console.log("==================="+ res.data.data.list)
       this.Data = res.data.data.list;
     })
   },
    handleSizeChange(size) {
            this.pagesize = size;
      },
       handleCurrentChange(currentPage) {
            this.currentPage = currentPage;
      }
  },
};
</script>

<style>
.background {
    width:100%;
    height:100%;  /**宽高100%是为了图片铺满屏幕 **/
    z-index:-1;
    position: absolute;
}
 .content {
    z-index:1;
    position: absolute;
}
</style>
